<script setup lang="ts">
import { ref } from "vue";
import router from "@/router";
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
import { useRoute } from "vue-router";
import { stocktakingTypeList } from "@/utils/staticData"

const multiTagsStore = useMultiTagsStoreHook();
const route = useRoute();

let form = ref({
  stocktakingType: "",
  warehouseName: "",
  stocktakingCode: "",
  leaderUserName: "",
  memo: ""
});

const goBack = () => {
  multiTagsStore.handleTags("splice", route.path);
  router.back();
};

const setForm = (opt: {}) => {
  form.value = opt || {};
}

const validateForm = () => {
  // Implementation of validateForm
};

defineExpose({
  getForm: () => form.value,
  setForm,
  validateForm
});
</script>

<template>
  <div class="applyForm">
    <div class="flex items-center justify-between flex-row pb-[16px]">
      <p class="text-[16px] font-bold">盘点信息管理</p>
      <el-button @click="goBack"
        ><svg-icon name="rollback" size="16" />&nbsp;返回</el-button
      >
    </div>
    <el-descriptions class="mb-[-12px]">
      <el-descriptions-item label="盘点类型：">
        {{
          stocktakingTypeList.find(val => val.value === form.stocktakingType)
            ?.label
        }}
      </el-descriptions-item>
      <el-descriptions-item label="盘点仓库：">
        {{ form.warehouseName }}
      </el-descriptions-item>
      <el-descriptions-item label="盘点单号：">
        {{ form.stocktakingCode }}
      </el-descriptions-item>
      <el-descriptions-item label="盘点人员：">
        {{ form.leaderUserName }}
      </el-descriptions-item>
      <el-descriptions-item label="调出备注：">
        <span>{{ form.memo }}</span>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<style scoped lang="scss">
.applyForm {
  overflow: hidden;
}
</style>
